.bilibiliAnimation {
  margin-top: 20px;

  .mainElement {
    display: flex;
    height: 30px;
    padding: 20px;

    .ele1 {}

    .ele2 {
      display: flex;
      position: relative;
      width: 120px;
      transform-style: preserve-3d;
      transition: 0.5s;
      // .ele2normal {
      //   padding: 10px;
      //   position: absolute;
      //   transform: rotateX(0deg) translateZ(20px);
      // }
      // .ele2hover {
      //   padding: 10px;
      //   position: absolute;
      //   transform: rotateX(-90deg) translateZ(20px);
      // }

      .ele2normal {
        position: absolute;
        transform: translateZ(20px)
      }

      .ele2hover {
        position: absolute;
        transform: rotateX(-90deg) translateZ(10px) translateY(-5px)
      }
    }

    &:hover {
      .ele2 {
        transform: rotateX(90deg);
      }
    }
  }
}